<template>
    <view>
        <u-navbar fixed bgColor="transparent" :shadow="navbar.shadow" :bgColor="navbar.bgColor"
            :border="navbar.bgColor != 'transparent'">
            <view slot="left" class="d-flex" @click="show.showApp = true">
                <text class="d-font-28 d-m-r-10 u-line-1" 
					:style="{ color: navbar.bgColor == 'transparent' ? '#fff' : '#151C24' }">
                    {{ Array.isArray($user.ssgcxx) && $user.ssgcxx.length ? $user.ssgcxx[$appIndex].gcmc : '暂无项目' }}
                </text>
                <!-- <u--image src="/static/icon/icon-03.png" width="24rpx" height="24rpx"></u--image> -->
                <u-icon name="arrow-down" size="24rpx" :color="navbar.bgColor == 'transparent' ? '#fff' : '#151C24'"></u-icon>
            </view>
            <view slot="right">
                <view class="d-flex">
                    <!-- todo 原型没有 -->
                    <!-- <view class="d-m-r-40">
						<u--image src="/static/icon/icon-40.png" width="44rpx" height="44rpx"></u--image>
					</view> -->
                    <!-- <u--image @click="scan" src="/static/icon/icon-02.png" width="44rpx" height="44rpx"></u--image> -->
                    <u-icon class="u-m-l-20" name="scan" size="26"
                        :color="navbar.bgColor == 'transparent' ? '#fff' : '#151C24'">
					</u-icon>
                </view>
            </view>
        </u-navbar>

        <view class="d-p-b-20">
            <u-swiper circular height="350rpx" :loading="banner.length == 0" :list="banner" keyName="attachUrl"
                @change="e => (current = e.current)">
                <view slot="indicator" class="indicator">
                    <view class="indicator__dot" v-for="(item, index) in banner" :key="index"
                        :class="[index === current && 'indicator__dot--active']"></view>
                </view>
            </u-swiper>
        </view>
        <view>
            <u-grid col="4">
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="team">
                    <u--image src="/static/icon/icon-41.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">班组</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="member">
                    <u--image src="/static/icon/icon-42.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">人员</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="work">
                    <u--image src="/static/icon/icon-05.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">考勤</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="wages">
                    <u--image src="/static/icon/icon-06.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">工资</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="train">
                    <u--image src="/static/icon/icon-07.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">培训</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="count">
                    <u--image src="/static/icon/icon-43.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">统计分析</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="memberDetail">
                    <u--image src="/static/icon/icon-04.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">个人信息</text>
                </u-grid-item>
            </u-grid>
        </view>
        <view class="d-p-30">
            <template v-if="cpg">
                <view class="d-m-t-20"><text class="d-font-36" style="font-weight: bold;">单位概况</text></view>
                <view class="card d-m-t-30 d-p-30">
                    <view class="d-font-32 d-m-b-30 d-flex" style="color: #323334;font-weight: bold;">
                        <u--image src="/static/icon/icon-44.png" width="48rpx" height="48rpx"></u--image>
                        <text class="d-m-l-20 u-line-1">{{ cpg.jbxxMap.qymc }}</text>
                    </view>
                    <view class="d-flex" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24 d-flex">
                            <text style="">项目负责人</text>
                            <text class="d-m-l-20 u-line-1 d-flex-1">{{ cpg.jbxxMap.qyfzr || '无数据源' }}</text>
                        </view>
                        <view class="d-flex-1 d-font-24">
                            <text style="">属地</text>
                            <text class="d-m-l-20">{{ cpg.jbxxMap.qyssqh || '无数据源' }}</text>
                        </view>
                    </view>
                    <view class="d-flex d-m-t-20" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24">
                            <text style="">统一社会信用代码</text>
                            <text class="d-m-l-20">{{ cpg.jbxxMap.tyshxydm || '无数据源' }}</text>
                        </view>
                    </view>
                    <view class="d-flex d-m-t-20" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24 d-flex">
                            <text style="">联系电话</text>
                            <view class="d-m-l-20">
                                <u--text color="#21A5F3" size="24rpx" mode="phone" call
                                    :text="cpg.jbxxMap.qyfzrlxdh || '无数据源'"></u--text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">项目班组信息</text></view>
                <view class="card d-m-t-30 d-p-30" @click="team">
                    <view class="d-font-32 d-m-b-30 d-flex" style="color: #323334;font-weight: bold;">
                        <u--image src="/static/icon/icon-45.png" width="48rpx" height="48rpx"></u--image>
                        <text class="d-m-l-20 u-line-1">{{ cpg.jbxxMap.gcmc || '无数据源' }}</text>
                    </view>
                    <view class="d-flex" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24 d-flex">
                            <text style="">属地</text>
                            <text class="d-m-l-20 d-flex-1 u-line-1">{{ cpg.jbxxMap.qyssqh || '无数据源' }}</text>
                        </view>
                        <view class="d-flex-1 d-font-24">
                            <text style="">班组人数</text>
                            <text class="d-m-l-20">{{ cpg.jbxxMap.bzrs || '0' }}人</text>
                        </view>
                    </view>
                    <view class="d-flex d-m-t-20" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24 d-flex">
                            <text style="">班组名称</text>
                            <text class="d-m-l-20 d-flex-1 u-line-1">{{ cpg.jbxxMap.bzmc }}</text>
                        </view>
                    </view>
                </view>
            </template>

            <view class="d-m-t-50 d-flex">
                <text class="d-font-36 d-flex-1" style="font-weight: bold;">考勤记录</text>
                <view>
                    <u-button text="考勤打卡" shape="circle" size="mini" 
						:customStyle="{ color: '#21A5F3', borderColor: '#DFDFDF', backgroundColor: '#FBFCFC'}" @click="work">
					</u-button>
                </view>
            </view>
            <view class="card d-m-t-30 d-p-30">
                <view class="d-flex">
                    <text class="d-font-32" style="font-weight: bold;">当前月份</text>
                    <text class="d-font-36 d-m-l-20 d-flex-1" style="font-weight: bold;">{{ form.nym }}</text>
                    <view @click="show.showDate = true" class="d-font-24 d-flex d-row-center d-col-center"
                        style="color: #505355;">
                        <text class="d-m-r-20">{{ form.ym }}</text>
                        <u-icon style="position: relative;top: 4rpx;" name="arrow-down" size="24rpx" color="#DFDFDF">
                        </u-icon>
                    </view>
                </view>

                <view class="d-flex d-text-center d-m-t-30">
                    <view class="d-flex-1" style="color: #162233;">
                        <view>
                            <text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.day : 0 }}</text>
                            <text class="d-font-20">天</text>
                        </view>
                        <text class="d-font-24">应出勤</text>
                    </view>
                    <view class="d-flex-1" style="color: #162233;">
                        <view>
                            <text style="font-size: 52rpx;font-weight: bold;">{{ psatd ? psatd.atdStaffs : 0 }}</text>
                            <text class="d-font-20">天</text>
                        </view>
                        <text class="d-font-24">实际出勤</text>
                    </view>
                    <view class="d-flex-1" style="color: #162233;">
                        <view>
                            <text
                                style="font-size: 52rpx;font-weight: bold;color: #E94343;">{{ psatd ? psatd.unatdStaffs : 0 }}</text>
                            <text class="d-font-20">天</text>
                        </view>
                        <text class="d-font-24">考勤异常</text>
                    </view>
                </view>
            </view>

            <view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">数据看板</text></view>
            <view class="card d-m-t-30 d-p-30">
                <view class="sub-title d-font-30" style="color: #0882F3;">工人情况</view>
                <view class="d-flex d-m-t-20">
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-46.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">{{ ssu ? ssu.staffs : 0 }}
                            </view>
                            <view class="d-font-24" style="color: #5D6672;">实名制人数</view>
                        </view>
                    </view>
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-47.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ ssu ? ssu.wstaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">待进场工人数</view>
                        </view>
                    </view>
                </view>
                <view class="d-flex d-m-t-20">
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-48.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ ssu ? ssu.istaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">进场人数</view>
                        </view>
                    </view>
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-49.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ ssu ? ssu.ostaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">离场人数</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="card d-m-t-30 d-p-30">
                <view class="sub-title d-font-30" style="color: #0882F3;">今日考勤</view>
                <view class="d-flex d-m-t-20">
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-46.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">{{ atd ? atd.staffs : 0 }}
                            </view>
                            <view class="d-font-24" style="color: #5D6672;">考勤人数</view>
                        </view>
                    </view>
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-50.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ atd ? atd.unatdStaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">缺勤人数</view>
                        </view>
                    </view>
                </view>
                <view class="d-flex d-m-t-20">
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-51.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ atd ? atd.atdRate : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">考勤率</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="card d-m-t-30 d-p-30" v-if="Array.isArray($user.ssgcxx) && $user.ssgcxx.length">
                <view class="d-flex d-m-b-30">
                    <view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">工人分布</view>
                    <text class="d-font-26" style="color: #8E9291;">单位: 人</text>
                </view>
                <chart :atd="atdData"></chart>
            </view>
        </view>
        <u-datetime-picker mode="year-month" :show="show.showDate" @cancel="show.showDate = false" @confirm="setYM"
            :maxDate="form.time" closeOnClickOverlay :value="form.stime"></u-datetime-picker>
        <u-picker :show="show.showApp" title="请选择" :columns="project" keyName="gcmc" :defaultIndex="projectIndex"
            @cancel="show.showApp = false" @close="show.showApp = false" closeOnClickOverlay @confirm="setApp">
        </u-picker>
    </view>
</template>

<script>
import chart from "./components/chart.vue";
import {
    fileList,
    cpgOverview,
    getPsatd,
    appSsu,
    atdToday,
    atdCount,
} from "../../common/api.js";
export default {
    components: {
        chart,
    },
    data() {
        return {
            navbar: {
                bgColor: "transparent",
                shadow: false,
            },
            current: 0,
            show: {
                showDate: false,
                showApp: false,
            },
            form: {
                date: "",
                ym: "",
                time: "",
                md: "",
                stime: "", // 选中的值
            },
            banner: [],
            cpg: null, //企业概况
            psatd: null, // 月考勤
            ssu: null, // 工人情况
            atd: null, // 今日考勤
            atdData: null, // 工人分布

            project: [],
            projectIndex: [0],
        };
    },
    onLoad() {
        this.project = [this.$user.ssgcxx];
        this.projectIndex = [this.$appIndex];
    },
    onShow() {
        this.form.time = new Date().getTime();
        if (!this.form.stime) {
            this.form.stime = this.form.time;
        }
        this.form.date = uni.$u.timeFormat(this.form.time, "yyyy-mm-dd");
        this.form.ym = uni.$u.timeFormat(this.form.time, "yyyy-mm");
        this.form.nym = uni.$u.timeFormat(this.form.time, "yyyy-mm");
        this.init();
    },
    // 页面滚动
    onPageScroll(e) {
        if (e.scrollTop > 45) {
            this.navbar.bgColor = "#fff";
            this.navbar.shadow = true;
        } else {
            this.navbar.bgColor = "transparent";
            this.navbar.shadow = false;
        }
    },
    methods: {
        init() {
            fileList({
                params: {
                    ywlx: "focus_map",
                    bid: "focus_map_20210000001",
                    attachType: "focus_map",
                },
            }).then((e) => {
                this.banner = e.rows;
                if (!this.$user.ssgcxx) {
                    return false;
                }
                this.cpgOverview(); // 企业概括-班组信息
                this.getPsatd(); // 考勤
                this.appSsu(); // 工人情况
                this.atdToday(); // 今日考勤
                this.atdCount(); // 工人分布
            });
        },
        cpgOverview() {
            // 企业概括
            cpgOverview({
                params: {
                    bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                    gcbh: this.$user.ssgcxx[this.$appIndex].gcbh, // 所属项目编号
                    deptId: this.$user.ssgcxx[this.$appIndex].deptId, // 所属部门编号
                },
            }).then((e) => {
                this.cpg = e.data;
            });
        },
        getPsatd() {
            // 考勤
            getPsatd({
                params: {
                    bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                    rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
                    date: this.form.date, // 查询日期 y-m-d
                },
            }).then((e) => {
                this.psatd = e.data;
            });
        },
        appSsu() {
            // 工人情况
            appSsu({
                params: {
                    bzbh: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                },
            }).then((e) => {
                this.ssu = e.data;
            });
        },
        atdToday() {
            // 今日考勤
            atdToday({
                params: {
                    bzbh: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                },
            }).then((e) => {
                this.atd = e.data;
            });
        },
        atdCount() {
            // 工人分布
            atdCount({
                params: {
                    bzbh: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
                },
            }).then((e) => {
                this.atdData = e.data;
            });
        },
		// 切换项目
        setApp(e) {
            this.show.showApp = false;
            this.projectIndex = e.indexs;
            uni.$u.vuex("$appIndex", e.indexs[0]);
            uni.setStorageSync("$appIndex", e.indexs[0]);
            this.init();
        },
        setYM(e) {
            this.form.stime = e.value;
            this.form.date = uni.$u.timeFormat(this.form.stime, "yyyy-mm-dd");
            this.form.ym = uni.$u.timeFormat(this.form.stime, "yyyy-mm");
            this.show.showDate = false;
            this.getPsatd();
        },
        team() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/team/team" });
        },
        member() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/member/member" });
        },
        memberDetail() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({
                url: "/pages/index/member/memberDetail",
                params: {
                    id: this.$user.ssgcxx[this.$appIndex].rybh,
                },
            });
        },
        work() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            if (this.$user.ssgcxx[this.$appIndex].isStartYdkq == 0) {
                return uni.$u.toast("该项目未启动移动考勤，无法使用此功能");
            }
            uni.$u.route({ url: "/pages/index/work/work" });
        },
        train() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/train/train" });
        },
        wages() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/wages/wages" });
        },
        count() {
            if (!this.$user.ssgcxx || this.$user.ssgcxx.length <= 0) {
                return uni.$u.toast("请选择项目");
            }
            uni.$u.route({ url: "/pages/index/count/count" });
        },
        scan() {
            uni.scanCode({
                scanType: ["qrCode"],
                success: (e) => {
                    console.log(e);
                },
                fail: (e) => {
                    console.error(e);
                },
            });
        },
    },
};
</script>

<style lang="scss">
.indicator {
    @include flex(row);
    justify-content: center;

    &__dot {
        height: 4rpx;
        width: 20rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5rpx;
        transition: background-color 0.3s;
        &--active {
            background-color: #ffffff;
            width: 28rpx;
        }
    }
}
page {
    background-color: #fbfcfc;
}
.card {
    box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
    border-radius: 10rpx;
    background-color: #ffffff;

    .sub-title {
        position: relative;
        padding-left: 20rpx;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 8rpx;
            height: 22rpx;
            background: #13a4fe;
            border-radius: 4rpx;
            bottom: 0;
            margin: auto;
        }
    }
}
</style>
